<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://openfaces.org"
	template="/WEB-INF/esquema/plantillasimple.xhtml">

	<rich:modalPanel id="selectLandUsePanel" width="400" height="450" zindex="10600">
		<f:facet name="header">
			<h:outputText value="Seleccionar Tipo de Uso"/>
		</f:facet>
		
		<f:facet name="controls">
			<h:panelGroup>
				<h:graphicImage value="/img/close.png" styleClass="hidelink"
					id="hideSelectLandUsePanel" />
				<rich:componentControl for="selectLandUsePanel" attachTo="hideSelectLandUsePanel"
					operation="hide" event="onclick" />
			</h:panelGroup>
		</f:facet>

		<h:form id="frmSelectLandUse">
			<h:panelGroup rendered="#{selectLandUseHelper.inputFieldSpecified}">
				<h:panelGroup id="funCompleteSelection">
						<script type="text/javascript">
							function completeSelection() {
								#{rich:element(selectLandUseHelper.landUseNameInputFieldName)}.value = '#{selectLandUseHelper.selectedNameStr}';
								//document.getElementById('#{selectLandUseHelper.landUseNameInputFieldName}').value = '#{selectLandUseHelper.selectedNameStr}';
								#{rich:component('selectLandUsePanel')}.hide();
							}
						</script>
				</h:panelGroup>
				
				<h:panelGroup id="frmLandUse">
					<rich:toolBar style="height:25px">
						<rich:toolBarGroup location="left">
							<h:outputText value="Nivel: #{selectLandUseHelper.currentLevel}" />
						</rich:toolBarGroup>
						<rich:toolBarGroup location="left"></rich:toolBarGroup>
						<rich:toolBarGroup location="right">
							<a4j:commandLink
								value="Nivel superior"
								action="#{selectLandUseHelper.rollUp}"
								reRender="frmLandUse"
								rendered="#{selectLandUseHelper.currentLevel gt 0}">
							</a4j:commandLink>
						</rich:toolBarGroup>
					</rich:toolBar>	
					
					<br />
					<br />
					
					<div style="width:100%;height:420px;overflow:auto;">
						<rich:dataTable id="dtLandUse" var="lu" value="#{selectLandUseHelper.currentLandUseList}" rows="15" width="100%" columnsWidth="10%,70%,20%">
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Codigo" />
								</f:facet>
								<h:outputText value="#{lu.completeCode}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">
									<h:outputText value="Nombre" />
								</f:facet>
								<a4j:commandLink
									value="#{lu.name}"
									action="#{selectLandUseHelper.drillDown(lu)}"
									reRender="frmLandUse"
									rendered="#{not lu.leaf}">
								</a4j:commandLink>
								<h:outputText value="#{lu.name}" rendered="#{lu.leaf}" />
							</rich:column>
							<rich:column>
								<a4j:commandLink
								value="Seleccionar"
								action="#{selectLandUseHelper.select(lu)}"
								reRender="funCompleteSelection"
								oncomplete="completeSelection()">
								</a4j:commandLink>
							</rich:column>
						</rich:dataTable>
					</div>
				</h:panelGroup>
				<br/>
			</h:panelGroup>
		</h:form>
	</rich:modalPanel>

</ui:component>
